
<style scoped>
    .picktext{
        border:2px solid #ddd;
        padding:5px;
        text-align: left;
        width: fit-content;
    }
    .textcontant .tittle{
        height: 30px;
        line-height: 30px;
        font-weight: 700;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .contain{
        padding-left: 2px;
    }
    .contain .list{
        border-bottom:1px solid #ddd;
        cursor: pointer;
        min-height: 100px;
        overflow: hidden;
    }
    .left{
        float: left;
        overflow: hidden;
    }
    .leftimg img{
        width: 100px;
        height: 100px;
    }
    .lefttext{
        padding:10px;
    }
    .lefttext .tit{
        color:red;
    }
    .lefttext .author{
        text-align: right;
    }
    .lefttext .dis{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        width: 300px;
        text-indent: 2em;
    }
</style>

<template>
    <div class="picktext">
        <div class="textcontant">
            <div class="tittle">
                {{textlist.tittle}}
            </div>
            <div class="contain">
                <div class="list" v-for="item in textlist.xinwen" @click="godetail(item.id)">
                    <div class="left leftimg">
                        <img :src="item.img" :alt="item.alt">
                    </div>
                    <div class="left lefttext">
                        <div class="tit">{{item.tit}}</div>
                        <div class="author">{{item.author}}--{{item.time | datetime}}</div>
                        <div class="dis">{{item.miaoshu}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            price:95,
            textlist:{
                tittle:"图文",
                xinwen:[
                {
                    id:"0000001",
                    img:"http://pic1.nipic.com/2008-10-24/20081024114121878_2.jpg",
                    alt:"图片不见了",
                    tit:"第一图文",
                    author:"作者编号111",
                    miaoshu:"这是一些描述信息,这是一些描述信息,这是一些描述信息,这是一些描述信息,这是一些描述信息,这是一些描述信息,这是一些描述信息,这是一些描述信息,这是一些描述信息,",
                    time:1516296853000
                },{
                    id:"0000002",
                    img:"http://pic1.nipic.com/2008-10-24/20081024114121878_2.jpg",
                    alt:"图片不见了",
                    tit:"第二图文",
                    author:"作者编号222",
                    time:1516296853000
                },{
                    id:"0000003",
                    img:"http://pic1.nipic.com/2008-10-24/20081024114121878_2.jpg",
                    alt:"图片不见了",
                    tit:"第一图文",
                    author:"作者编号222",
                    time:1516296853000
                }
            ]}
        }
    },
    methods: {
        godetail(id){
            console.log(id)
        }
    },

}
</script>

